<!-- 
 * 省市区选择器
 * 2020年11月17日15:54:01
 -->
<template>
	<view class="region">
		<picker mode="multiSelector" :range="range" range-key="name" @change="change" @columnchange="columnchange" :value="value" :disabled="disabled">
			<view class="content" :class="{ placeholder: !regionStr }">
				<text  class="ellipsis-1 select">
					<text style="color: #999999;">{{label}}</text>
					{{ regionStr ? regionStr : placeholder }}
				</text>
			</view> 
		</picker>
	</view>
</template>

<script>
const regionData = require('@/common/region-2.json');
export default {
	/**
	 * 数据
	 */
	props: {
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},

		placeholder: {
			type: String,
			default: '全国'
		},
		// 默认值
		defaultValue: {
			type: Array,
			default() {
				return null;
			}
		},
		label: {
			type: String,
			default: ''
		},
		areafilter: {
			type: Object,
			default: {}
		}
	},

	data() {
		return {
			range: [[], []], // 省/市
			value: [0, 0], // value 的值表示选择了 range 中的第几个（下标从 0 开始）,默认为 [0, 0, 0]，即 range 为 ['第一个省', '第一个省的第一个市', '第一个省的第一个市的第一个区']
			regionStr: '' // 选中的省市区字符串
		};
	},

	watch: {
		// 默认值
		defaultValue() {
			// 设置/更新省市区数据
			this.defaultValue ? this.setDefaultValue() : this.setRange();
		},
		areafilter: {
			deep:true,
			immediate: true,
			handler(newVal) {
				if(!newVal.province.length || !newVal.city.length) return;
				for (var i = 0; i < regionData.length; i++) {
					var theProvince = regionData[i];
					var idx = newVal.province.indexOf(theProvince.id.toString());
					if(idx == -1 && theProvince.id != 0) {
						regionData.splice(i,1);
						i--;
					} else {
						for (var j = 0; j < theProvince.children.length; j++) {
							var theCity = theProvince.children[j];
							var subidx = newVal.city.indexOf(theCity.id.toString());
							if( subidx == -1 && (theCity.id != theProvince.id)) {
								regionData[i].children.splice(j,1);
								j--; 
							}
						} 
					}
				}
				// 设置/更新省市区数据
				this.defaultValue ? this.setDefaultValue() : this.setRange();
			}
		}
	},
	mounted() {
		this.defaultValue ? this.setDefaultValue() : this.setRange();
	},
	methods: {
		/**
		 * 设置/更新省市区数据
		 */
		setRange() {
			// 省市区数据
			let range = [[], []];

			// 省
			regionData.forEach(el => {
				range[0].push({
					id: el.id,
					level: el.level,
					name: el.name,
					pid: el.pid
				});
			});

			// 市
			regionData[this.value[0]].children.forEach(el => {
				range[1].push({
					id: el.id,
					level: el.level,
					name: el.name,
					pid: el.pid
				});
			});
			// 更新省市数据
			this.range = range;
		},

		/**
		 * 设置默认值
		 */
		setDefaultValue() {
			// 查找省
			let provinceIndex = regionData.findIndex(el => {
				return el.name == this.defaultValue[0];
			});
			if(provinceIndex < 0) provinceIndex = 0;

			// 查找市
			let cityIndex = regionData[provinceIndex].children.findIndex(el => {
				return el.name == this.defaultValue[1];
			});
			if(cityIndex < 0) cityIndex = 0;


			// 更新 value 的值
			this.value = [provinceIndex, cityIndex];
			console.log(this.value)
			// 设置/更新省市区数据
			this.setRange();

			// 更新选中的省市区字符串	
			if(this.value[0] ==0) {
				this.regionStr = regionData[provinceIndex].name;
			} else {
				this.regionStr =
					regionData[provinceIndex].name + '·' + regionData[provinceIndex].children[cityIndex].name;
			}
			
		},

		/**
		 * 某一列的值改变时触发
		 * @param {Number} event.detail.column 表示改变了第几列（下标从0开始）
		 * @param {Number} event.detail.value 表示变更值的下标
		 */
		columnchange(event) {
			// 改变的是省
			if (event.detail.column == 0) {
				this.value = [event.detail.value, 0, 0];
			}
			// 改变的是市
			if (event.detail.column == 1) {
				this.value.splice(1, 1, event.detail.value);
				this.value.splice(2, 1, 0);
			}
			// 改变的是区
			if (event.detail.column == 2) {
				this.value.splice(2, 1, event.detail.value);
			}

			// 设置/更新省市区数据
			this.setRange();
		},

		/**
		 * 确认选择
		 */
		change(event) {
			// 更新选中的省市区字符串
			let val = this.range[1][this.value[1]].name;
			let cityName = (val =='全部') || (val =='全国')?'':'-'+val;
			this.regionStr = this.range[0][this.value[0]].name  + cityName ;
			// 传递事件
			this.$emit('change', [this.range[0][this.value[0]], this.range[1][this.value[1]]]);
		}
	}
};
</script>

<style lang="scss" scoped>
.ellipsis-1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.content {
	// text-align: right;
	display: flex !important;
	align-content: center;
	white-space: nowrap;
}

.placeholder {
	color: #949596;
}
.select {
	color: #407CFF;
}
</style>
